<template>
   <div class="content">
   	<div class="input size">
   		<el-row class="demo-autocomplete">
   			<!-- style="align-items: flex-end" -->
   			<el-col :span="4" class="inpt_in">
   				<el-form class="demo-form-inline">
   					<el-form-item label="用户ID" :label-width="formLabelWidth">
   						<el-input  v-model="extensionDataParamPayment.useId" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
   					</el-form-item>
   				</el-form>
   			</el-col>
   			<el-col :span="4" class="inpt_in">
   				<el-form class="demo-form-inline">
   					<el-form-item label="用户邮箱" :label-width="formLabelWidth">
   						<el-input v-model="extensionDataParamPayment.email" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
   					</el-form-item>
   				</el-form>
   			</el-col>
			<el-col :span="4" class="inpt_in">
				<el-form class="demo-form-inline">
					<el-form-item label="用户昵称" :label-width="formLabelWidth">
						<el-input v-model="extensionDataParamPayment.nickname" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :span="4" class="inpt_in">
				<el-form class="demo-form-inline">
					<el-form-item label="推广码" :label-width="formLabelWidth">
						<el-input v-model="extensionDataParamPayment.code" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
					</el-form-item>
				</el-form>
			</el-col>
   			<el-col :span="2" class="inpt_in">
   				<el-button style="width:80%;" type="primary" @click="DefaultPaymentSearch()">搜索</el-button>
   			</el-col>
			<el-col :span="2" class="inpt_in">
				<el-button style="width: 90%" @click="detailDialog = true">加减款项操作</el-button>
			</el-col>
   		</el-row>
   	</div>
   	<div class="boder">
   		<el-row>
   			<el-table :data="paymentTbael" border style="width: 100%" :header-cell-style="{'text-align':'center','color':'rgba(0,0,0,0.85)'}"
   			 stripe>
   				<el-table-column prop="userId" label="用户ID" width="180" align="center">
   				</el-table-column>
   				<el-table-column prop="email" label="用户邮箱" width="180" align="center">
   				</el-table-column>
   				<el-table-column prop="nickname" label="用户昵称" width="180" align="center">
   				</el-table-column>
   				<el-table-column prop="code" label="推广码" width="180" align="center">
   				</el-table-column>
   				<el-table-column prop="money" label="调整金额" width="180" align="center">
   				</el-table-column>
   				<el-table-column prop="updatedAtStr" label="操作时间" width="180" align="center">
   				</el-table-column>
   				<el-table-column prop="updatedAdminId" label="操作人" width="180" align="center">
   				</el-table-column>
   				<el-table-column prop="remarkAdmin" label="备注" width="330" align="center">
   				</el-table-column>
   			</el-table>
   		</el-row>
  		<el-pagination background layout="prev, pager, next,total" :page-count="extensionDataParamPayment.pageCount" @current-change="currentPageChangePayment">
   		</el-pagination>
   		<el-dialog title="详情" :visible.sync="detailDialog" top="5vh" @close="updateParam={};">
            <el-row class="demo-autocomplete">
				<el-col :span="17" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="用户邮箱" :label-width="formLabelWidth">
							<el-input v-model="updateParam.email" autocomplete="off" placeholder="用户邮箱" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row class="demo-autocomplete">
				<!-- style="align-items: flex-end" -->
				<el-col :span="17" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="用户ID" :label-width="formLabelWidth">
							<el-input v-model="updateParam.useId" autocomplete="off" placeholder="用户ID" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row class="demo-autocomplete">
				<!-- style="align-items: flex-end" -->
				<el-col :span="17" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="推广码" :label-width="formLabelWidth">
							<el-input v-model="updateParam.code" autocomplete="off" placeholder="推广码" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row class="demo-autocomplete">
				<!-- style="align-items: flex-end" -->
				<el-col :span="17" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="调整金额" :label-width="formLabelWidth">
							<el-input v-model="updateParam.money" autocomplete="off" placeholder="以-号或者+号开头" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row class="demo-autocomplete">
				<!-- style="align-items: flex-end" -->
				<el-col :span="17" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="备注" :label-width="formLabelWidth">
							<el-input v-model="updateParam.msg" autocomplete="off" placeholder="备注" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
            <div style="margin-top: 10vh;">
                <div slot="footer" class="dialog-footer" style="margin-left: 75%;width: 200px;">
                    <el-button @click="detailDialog=false;">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </div>
            </div>
        </el-dialog>
   	</div>
   </div>
</template>
<script>
	import api from '../../../api/PurchaseDelivery/index.js'
export default {
    data() {
    	return {
    		formLabelWidth: '6vw',
			getDataDs: {
				"currentPage": 1,
				"pageSize": 10,
				"total": 100,
				"pageCount": 0,
				"query": {
					"product_type": 1,
					"name": "",
					"type": "",
					"state": ""
				}
			},		
			detailDialog:false,
			updateParam:{},
			detailDataOrdinaaryParama:{},
    		formLabelWidth: '6vw',
			extensionDataParamPayment: {
				useId: "",
				email:"",
				nickname: "",
				code: "",
				currentPage:1,
				pageSize:3,
				pageCount:10
			},
			paymentTbael:[]
    	}
    },
	created() {
		this.PaymentSearch()
	},
	methods: {
		formatDate (obj,fmt) {
			var o = {
				"M+": obj.getMonth() + 1,                 //月份
				"d+": obj.getDate(),                    //日
				"h+": obj.getHours(),                   //小时
				"m+": obj.getMinutes(),                 //分
				"s+": obj.getSeconds(),                 //秒
				"q+": Math.floor((obj.getMonth() + 3) / 3), //季度
				"S": obj.getMilliseconds()             //毫秒
			};
			if (/(y+)/.test(fmt))
				fmt = fmt.replace(RegExp.$1, (obj.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt))
					fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		},
		onSubmit(){
			this.updateParam.userId = localStorage.getItem('currentId');
			this.$axios.get(`${api}/gamemall/balance/update`,this.updateParam)
            .then( res => {
            if(res.code === 200){
                this.detailDialog =false;
                this.$message({
					message: '加减款成功',
					type: 'warning'
				});
                this.PaymentSearch();
            }else if(res.code === 500){
                this.$message({
					message: '加减款失败',
					type: 'warning'
				});
				this.PaymentSearch();
            }
            })
            .catch( err =>{
            // this.$message({
            //     message: err.msg || '操作失败',
            //     type: 'warning'
            //   })
            });
		},
		currentPageChangePayment(currentPage) {
            this.extensionDataParamPayment.currentPage = currentPage;
            this.PaymentSearch();
		},
		DefaultPaymentSearch(){
			this.extensionDataParamPayment.currentPage = 1;
			this.extensionDataParamPayment.pageCount = 1 ;
			this.PaymentSearch();
		},
		PaymentSearch() {
			this.$axios.get(`${api}/gamemall/balance/list`,this.extensionDataParamPayment)
				.then(res => {
					if(res.obj==null || res.obj.list==null || res.obj.list.length === 0){
                        this.extensionDataParamPayment.currentPage = 1;
                        this.extensionDataParamPayment.pageCount = 0;
                        this.paymentTbael =[];
                    }else{
                        this.paymentTbael = res.obj.list;
						this.extensionDataParamPayment.pageCount = res.obj.pages;

						for(var i =0;i<this.paymentTbael.length;i++){
							let updatedAt= this.paymentTbael[i].updatedAt;
							this.paymentTbael[i].updatedAtStr = this.formatDate(new Date(parseInt(updatedAt)),'yyyy/MM/dd');;
						}
                    }

					// console.log(res.obj.list)
				})
				.catch(err => {
					// this.$message({
					// 	message: '请求异常',
					// 	type: 'warning'
					// })
				});
		}
	}
}
</script>

<style scoped>
	 .content {
	 	width: 99%;
	 	height: 99%;
      	margin-left: 0.5%;
	 	border: 1px solid #EBEEF5;
	 	background-color: #FFF;
	 	border-radius: 0.325rem;
	 }
	
	 .inpt_in {
   	   margin-top: 3%;
	 }
	
	 .boder {
	 	width: 98%;
	 	height: 75%;
	 	border: 1px solid #EBEEF5;
	 	margin-top: 2%;
	 	margin-left: 1%;
      }
	
	 .size {
	 	font-size: 0.8rem;
	 	color: #606266;
	 }
</style>